<script setup>
import {InfoFilled, Plus} from '@element-plus/icons-vue'
import axios from "axios";
import { onMounted,ref} from "vue";

let url= ref('http://localhost/file/downLoad?fileName=')
let clicked = ref(false)
let free=ref({
  id:"",
  freeName:"",
  freeImg:"",
  freeSimplyIntroduce:"",
  freeText:"",
  freeCreateTime:"",
  
})
let freeImg = ref('')
let len=ref(0);
// len.value=tableData.value.length
let isEdit=ref(false);


const get=()=>{
  axios.get("/free/freeSelectByName",{
    params:queryInfo.value
  })
      .then(res=>{
        console.log(res.data.data)
        freeArray.value=res.data.data.list;
        total.value=res.data.data.total;
      })
      .catch((err)=>{
        console.log(err)
      })
}
onMounted(()=>{
  get();
})

const searchName =()=>{
  get();
}


function onCancel() {
  clicked.value = true
}

const tableData =ref();
let freeArray=ref([]);


const fileList = ref([]);


let b=ref(1)
let c=ref(1)

const pageSize = 10;
// const ha = () => {
//   console.log("当前页码变为", c.value);
//   b.value = (c.value - 1) * pageSize;
//   console.log("b", b.value);
//   console.log("tableData", tableData.value);
//   const endIndex = Math.min(b.value + pageSize, tableData.value.length);
//   userArray.value = tableData.value.slice(b.value, endIndex);
//   console.log("tableData", tableData.value);
//   nextTick(() => {
//     console.log("确保页面更新");
//   });
// };

const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const total = ref(0);
const eee=(e)=>{
  console.log("e",e)
}
//修改
const updateFree=(row)=>{
  dialogFormVisible.value = true;
  isEdit.value=true;
  console.log(row)
  free.value=row;
  fileList.value=[
    {
      name: row.imageUrl,
      url: url.value + row.imageUrl,
    }
  ];
}
//动态对象：分页
const queryInfo = ref({
      pageNum:1,
      pageSize:2,
      name:'',
      // turl:'',
  })

   //分页方法
 const handleSizeChange = (val) => {
    queryInfo.value.pageSize=val;
    queryInfo.value.pageNum =1;
    get();
  }
  const handleCurrentChange = (val) => {
      queryInfo.value.pageNum=val;
      get();
  }
//添加
const addFree=()=>{
  dialogFormVisible.value = true;
  isEdit.value=false;
  free.value={
    freeId:"",
    freeName:"",
    freeImg:"",
    freeSimplyIntroduce:"",
    freeText:"",
    freeCreateTime:"",

  }
  fileList.value=[];
}
//图片上传
const handleAvatarSuccess = (response,uploadFile)=> {
  freeImg.value = URL.createObjectURL(uploadFile.raw);
  // 一旦上传成功，则需要把返回的数据赋值给article.imageUrl
  free.value.freeImg = response.data;
//   console.log('response',response)
//   console.log('uploadFile',uploadFile)
}
//修改和添加
const save=()=>{
  if(!isEdit.value){
    console.log(isEdit.value);
    axios.post("/free/freeAdd",free.value)
      .then(res=>{
        console.log(res.data.data)
        get();
        dialogFormVisible.value = false;
      })
  }
  else{
    axios.put("/free/freeUpdate",free.value)
      .then(res=>{
          console.log(res.data.data)
          get();
          dialogFormVisible.value = false;
        })
      .catch((err)=>{
          console.log(err)
        })
  }
}
//删除
const handleDeleteAndCancel = id => {
  axios.delete("/free/freeDelete/"+id)
    .then(res=>{
        console.log(res.data.data)
        get();
      })
    .catch((err)=>{
        console.log(err)
      });
  cancel();
};
</script>

<template>
  <!-- <div class="title">
    <h1 >公益表管理</h1>
  </div> -->
  <div>
  
      <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
      <el-form-item label="公益管理">
        <el-input v-model="queryInfo.name" placeholder="请输入关键字" clearable />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchName">搜索</el-button>
      </el-form-item>
    </el-form>
    
    <el-button type="primary" @click="addFree">添加公益</el-button>
    <el-table :data="freeArray" style="width: 100%">
      <el-table-column fixed prop="freeId" label="公益表编号" width="100" />
      <el-table-column prop="freeName" label="标题" width="140" />
      <el-table-column prop="freeImg" label="图片" width="140">
        <template #default="scope">
          <el-image v-if="scope.row.freeImg" style="width: 100px; height: 100px" :src="url+scope.row.freeImg" :fit='"cover"'/>
        </template>
      </el-table-column>


      <el-table-column prop="freeSimplyIntroduce" label="简介" width="140" />
      <el-table-column prop="freeText"      label="详情" width="120" />
      <el-table-column prop="freeCreateTime"       label="创建时间" width="160" />
    
      <el-table-column fixed="right"  label="管理" min-width="100">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="updateFree(scope.row)">
            修改
          </el-button>
          <el-popconfirm
              width="220"
              :icon="InfoFilled"
              icon-color="#626AEF"
              title="是否删除?"
              @cancel="onCancel"
          >
            <template #reference>
                  <el-button link type="primary" size="small">删除</el-button>
                </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button
                  type="danger"
                  size="small"
                  @click="handleDeleteAndCancel(scope.row.freeId, cancel)"
              >
                确认删除
              </el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 分页 -->
  <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[2, 5, 8, 10]"
        size="default"
  
        background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  <!-- <div>
    <el-pagination size="small" layout="prev, pager, next" :total="len" v-model:current-page="c" @update:current-page="" :background="true" />
  </div> -->
  <el-dialog v-model="dialogFormVisible" :title="isEdit?'修改':'添加'" width="500">
    <el-form :model="free">
      <el-form-item v-if="isEdit" label="id" :label-width="formLabelWidth">
        <el-input  v-model="free.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="free.freeName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="图片" :label-width="formLabelWidth">
        <!-- <el-input v-model="free.freeImg" autocomplete="off" /> -->
        <el-upload
            v-model:file-list="fileList"
            class="avatar-uploader"
            list-type="picture-card"
            action="http://localhost/file/upload"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="!fileList" :src="freeImg" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
      <el-form-item label="简介" :label-width="formLabelWidth">
        <el-input v-model="free.freeSimplyIntroduce" autocomplete="off" />
      </el-form-item>
      <el-form-item label="详情" :label-width="formLabelWidth">
        <el-input v-model="free.freeText" autocomplete="off" />
      </el-form-item>
      <el-form-item label="创建时间" :label-width="formLabelWidth">
        <el-input v-model="free.freeCreateTime" autocomplete="off" />
      </el-form-item>
      <!-- <el-form-item label="电话" :label-width="formLabelWidth">
        <el-input v-model="user.phone" autocomplete="off" />
      </el-form-item> -->
      <!-- <el-form-item label="头像" :label-width="formLabelWidth">

        <el-upload
            v-model:file-list="fileList"
            class="avatar-uploader"
            list-type="picture-card"
            action="http://localhost:8080/hello/upload"
            :on-success="handleAvatarSuccess"
        >
          <img v-if="!fileList" :src="imageUrl" class="avatar"  alt=""/>
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item> -->
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save">
          {{ isEdit ? '确认修改' : '确认添加'}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
.class {
  width: 100%;
  margin: 30px;
}
</style>